<template>
	<div class="vue_app" style="position: relative;width: 100%;">
		<div>
			<my-header :title="'核销明细'" :hasTitle="true" :hasBack="true"></my-header>
			<!--头部-->
			<div class="cardchargeoff">
				<p><span>礼品卡号：</span><span class="chargeofftitle">{{giftCard.giftcardEntityCode}}</span></p>
				<p><span>卡面余额：</span><span class="chargeofftitle">{{giftCard.balance.toFixed(2)}}</span></p>
				<p><span>初始面额：</span><span class="chargeofftitle">{{giftCard.denomination.toFixed(2)}}</span></p>
			</div>
		</div>
		<div class="overhid" :style="`height: ${screenHeight}px`">
			<vertical-scroll ref='verticalScroll'>
				<ul class="aui-list aui-media-list detailed_list" v-if="giftCard.activationStatus==1">
					<li class="aui-list-item" v-for="(item,index) in chargeoff">
						<div class="aui-list-item-inner">
							<div class="aui-list-item-text">
								<div class="aui-list-item-title">{{styletouchBalance(item.usedType)}}</div>
								<div style="font-size: 0.8rem;color: #EF5423;">
									<strong style="color: #EF5423;">{{item.usedType=='1'?"-":"+"}}</strong>
									<span>{{item.usedMoney.toFixed(2)}}</span>
								</div>
							</div>
							<div class="aui-list-item-text">
								<span>订单号：{{item.orderCode}}</span>
								<span class="aui-list-item-right">{{item.usedTm | time}}</span>
							</div>
						</div>
					</li>
					<div class="no_data" style="background-color: #f1f1f1;" v-if="chargeoff.length==0">
						<img src="static/image/no_news.png" style="width:70%;" />
						<p>暂无该卡核销明细</p>
					</div>
				</ul>
				<div class="activatebutton" v-if="giftCard.activationStatus==0">
					<span @click="jumpEventActivate(giftCard.giftcardEntityCode)">该礼品卡尚未激活，立即激活</span>
				</div>
			</vertical-scroll>

		</div>
		<button-to-top @goTop="goTop"></button-to-top>
	</div>
</template>

<script>
	import MyHeader from "../header";
	import axios from "axios";
	import VerticalScroll from '../../real-components/VerticalScroll';
	import ButtonToTop from '../../real-components/ButtonToTopForTest'
	export default {
		data() {
			return {
				chargeoff: [],
				//传过来的卡面信息
				giftCard:{},
				//路由卡的名字
				giftcardEntityId: "",
			}
		},
		components: {
			"my-header": MyHeader,
			"vertical-scroll": VerticalScroll,
			ButtonToTop
		},
		methods: {
			//获取卡面信息
			getgiftCard(){
				let obj=localStorage.getItem("giftcardEntity")
				this.giftCard=JSON.parse(obj)
			},
			//核销明细方式
			styletouchBalance(state){
				if(state==1){
					return "购物消费"
				}else if(state==2){
					return "订单退款"
				}else if(state==3){
					return "激活购物卡"
				}
			},
			//跳转激活礼品卡
			jumpEventActivate(giftcardEntityCode) {
				this.$router.push({
					path: 'ActivateGiftCard?cardid=' + giftcardEntityCode
				})
			},
			//回到顶部
			goTop() {
				this.$refs.verticalScroll.goTop()
			},
			//获取路由上面的卡的信息
			getcardid() {
				this.giftcardEntityId = this.$route.query.cardid
			},
			//获取数据请求
			getchargeoff() {
				var sessionId = localStorage.getItem('sessionId');
				let config = {
					url: window.api.customer_host + '/giftCardVerification/selectVerificationRecord',
					//url: 'http://172.19.5.199:33004/giftCardVerification/selectVerificationRecord',
					method: 'GET',
					params:{
						giftcardEntityIds:this.giftcardEntityId
					},
					headers: {
						'sessionId': sessionId,
					},
				};
				axios(config).then((res) => {
					this.chargeoff = res.data.data
				})
			}
		},
		computed: {
			screenHeight() {
				return window.innerHeight - '154';
			}
		},
		filters: {
			Time: function(time) {
				if(time) {
					let date = new Date(time);
					return `${date.getFullYear()}-${date.getMonth()+ 1}-${date.getDate()}  ${date.getHours() > 9 ? date.getHours() : '0' + date.getHours()}:${date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()}:${date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds()}`;
				}
			}
		},
		watch: {

		},
		mounted() {
			this.getgiftCard();
			this.getcardid();
			this.getchargeoff()
		},
	}
</script>

<style>
	/*核销明细页面样式*/
	
	.cardchargeoff {
		background-color: #fff;
		text-align: left;
	}
	
	.cardchargeoff p {
		height: 2.3rem;
		line-height: 2.3rem;
		padding: 0rem 0.8rem;
		margin-bottom: 0.3rem;
		border-bottom: 1px solid #eaeaea;
	}
	
	.cardchargeoff .chargeofftitle {
		color: #444444;
		margin-left: 0.3rem;
		font-size: 0.7rem;
	}
	/*未激活礼品卡的样式*/
	
	.activatebutton span {
		margin-top: 1.5rem;
		display: inline-block;
		width: 90%;
		font-size: 0.8rem;
		height: 2rem;
		line-height: 2rem;
		color: #fff;
		background-color: #EF5423;
		border-radius: 0.3rem;
	}
</style>